@extends('admin.layout.base')
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body panel-info">
            <el-form :model="form" ref="form" class="form" label-width="100px">
                <div class="panel-header"> <div class="panel-title"> 基本信息 </div> </div>
                <div class="panel-main">
                    <el-form-item label="标题：" prop="title" :rules="[{ required: true, message: '请填写标题', trigger: 'blur'}]">
                        <el-input clearable v-model="form.title" placeholder="请填写标题"></el-input>
                    </el-form-item>
                    <el-form-item label="类目：" prop="cate_id" :rules="[{ required: true, message: '请选择类目', trigger: 'blur'}]">
                        <el-cascader
                                placeholder="请选择类目"
                                separator=">"
                                :options="categoys"
                                expand-trigger="hover"
                                v-model="form.cate_id">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="预算(万)：" prop="price" :rules="[{ required: true, message: '请填写预算', trigger: 'blur'}]">
                        <el-input clearable v-model="form.price" placeholder="请填写预算"></el-input>
                    </el-form-item>
                    <el-form-item label="需求区域：" prop="area" :rules="[{ required: true, message: '请填写需求区域', trigger: 'blur'}]">
                        <el-cascader placeholder="请选择需求区域" :options="areas" v-model="form.area"></el-cascader>
                    </el-form-item>
                    <el-form-item label="截止时间：" prop="end_at" :rules="[{ required: true, message: '请选择截止时间', trigger: 'blur'}]">
                        <el-date-picker v-if="form.end_state == 0" readonly v-model="form.end_at" type="date" @change="end_at" placeholder="需求截止时间"></el-date-picker>
                        <el-date-picker v-else v-model="form.end_at" type="date" @change="end_at" placeholder="需求截止时间"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="需求描述：" prop="content" :rules="[{ required: true, message: '请填写需求描述', trigger: 'blur'}]">
                        <el-input type="textarea" rows="20" v-model="form.content"></el-input>
                    </el-form-item>
                    <el-form-item v-if="form.quick_id" label="快速发布人电话：" prop="quick_mobile">
                        <el-input readonly v-model="form.quick_mobile"></el-input>
                    </el-form-item>
                </div>
                <div class="panel-header"> <div class="panel-title"> 服务费信息 </div> </div>
                <div class="panel-main">
                    <el-form-item label="商户上限：" prop="limit_num">
                        <el-input clearable v-model="form.limit_num" placeholder="请填写投标商户上限"></el-input>
                    </el-form-item>
                    <el-form-item label="投标费用：" prop="bid_costs">
                        <el-input clearable v-model="form.bid_costs" placeholder="请填写投标费用"></el-input>
                    </el-form-item>
                    <el-form-item label="服务费类型：" prop="service_cate">
                        <el-cascader placeholder="请选择服务费类型" expand-trigger="hover" :options="serviceArr" v-model="form.service_cate"></el-cascader>
                    </el-form-item>
                    <el-form-item label="服务费比例(%)：" prop="service_charge" v-if="form.service_cate == 3">
                        <el-input clearable v-model="form.service_charge" placeholder="请填写服务费比例(%)"></el-input>
                    </el-form-item>
                </div>
                <div class="panel-header"> <div class="panel-title"> 公司信息 </div> </div>
                <div class="panel-main">
                    <el-form-item label="公司名称：" prop="company_name">
                        <el-input clearable v-model="form.company_name" placeholder="请填写公司名称"></el-input>
                    </el-form-item>
                    <el-form-item label="公司类型：" prop="company_type">
                        <el-cascader placeholder="请选择公司类型" :options="company_types" v-model="form.company_type"></el-cascader>
                    </el-form-item>
                    <el-form-item label="公司行业：" prop="company_industry">
                        <el-cascader placeholder="请选择公司行业" :options="company_industrys" v-model="form.company_industry"></el-cascader>
                    </el-form-item>
                    <el-form-item label="公司规模：" prop="company_size">
                        <el-cascader placeholder="请选择公司规模" :options="company_sizes" v-model="form.company_size"></el-cascader>
                    </el-form-item>
                    <el-form-item label="其他：" prop="other">
                        <el-input clearable v-model="form.other" placeholder="其他（选填）"></el-input>
                    </el-form-item>
                </div>
                <div class="panel-header"> <div class="panel-title"> 联系人信息 </div> </div>
                <div class="panel-main">
                    <el-form-item label="联系人姓名：" prop="link_name">
                        <el-input clearable v-model="form.link_name" placeholder="请填写联系人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人电话：" prop="link_phone">
                        <el-input clearable v-model="form.link_phone" placeholder="请填写联系人电话"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人部门：" prop="link_department">
                        <el-input clearable v-model="form.link_department" placeholder="请填写联系人部门"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人职位：" prop="link_position">
                        <el-input clearable v-model="form.link_position" placeholder="请填写联系人职位"></el-input>
                    </el-form-item>
                </div>
                <div class="panel-header"> <div class="panel-title"> 其他信息 </div> </div>
                <div class="panel-main">
                    <el-form-item v-if="form.id>0" v-if="form.evaluate_contract_img != null" label="合同文件：" prop="evaluate_contract_img">
                        <div width="100%">
                            <el-image width="100%" v-for="item in form.evaluate_contract_img" :src="item" :fit="fits"></el-image>
                        </div>
                    </el-form-item>
                    <el-form-item v-if="form.id>0" v-else label="合同文件：" prop="evaluate_contract_pdf">
                        <a target="_blank" :href="form.evaluate_contract_pdf"><el-button type="primary">查看文件</el-button></a>
                    </el-form-item>
                    <el-form-item label="是否加急：" prop="urgent" required>
                        <el-radio-group v-model="form.urgent">
                            <el-radio :label="1" border>否</el-radio>
                            <el-radio :label="2" border>是</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="来源：" prop="type" required>
                        <el-radio-group v-model="form.type">
                            <el-radio :label="1" border>HR发布</el-radio>
                            <el-radio :label="2" border>平台发布</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="状态：" prop="status" required>
                        <el-radio-group v-model="form.status">
                            <el-radio :label="1" border>正常</el-radio>
                            <el-radio :label="2" border>待审核</el-radio>
                            <el-radio :label="3" border>未通过</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if="form.status != 1" label="原因：" prop="reason" :rules="[{ required: true, message: '请填写状态原因', trigger: 'blur'}]">
                        <el-input type="textarea" clearable v-model="form.reason"></el-input>
                    </el-form-item>
                </div>
                <el-form-item style="padding-left: 150px;margin-top: 50px">
                    <el-button type="primary" @click="update()">保 存</el-button>
                    <el-button @click="back()" style="margin-left: 50px">返 回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset('neditor/neditor.config.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/neditor.all.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/neditor.service.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/i18n/zh-cn/zh-cn.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/third-party/browser-md5-file.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/third-party/jquery-1.10.2.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script>
        $(function () {
            let app = new Vue({
                el: '#app',
                data: function () {
                    return {
                        date:null,
                        info: {!! $info !!},
                        quick_info: {!! $quick_info !!},
                        form: {
                            id: " {{ $id }}",
                            cate_id: '',
                            title: '',
                            content: '',
                            area: 0,
                            price: 0,
                            end_at: '',
                            end_state: 1,
                            service_charge: '',
                            service_cate: 0,
                            limit_num: 0,
                            bid_costs: '',
                            company_name: '',
                            company_type: '',
                            company_industry: '',
                            company_size: '',
                            other: '',
                            link_name: '',
                            link_phone: '',
                            link_department: '',
                            link_position: '',
                            number: 0,
                            urgent: 1,
                            type: 2,
                            status: 1,
                            reason: '',
                            evaluate_contract_pdf: '',
                            evaluate_contract_img: '',
                            quick_id: {!! $quick_id !!},
                            quick_userid: {!! $quick_userid !!},
                            quick_mobile: {!! $quick_mobile !!},
                        },
                        serviceArr:
                            [
                                {
                                    value:1,
                                    label:'来电佣金'
                                },
                                {
                                    value:2,
                                    label:'投标佣金'
                                },
                                {
                                    value:3,
                                    label:'指定中标'
                                }
                            ],
                        categoys: {!! $categorys !!},
                        areas: {!! $areas !!},
                        company_types: {!! $company_types !!},
                        company_industrys: {!! $company_industrys !!},
                        company_sizes: {!! $company_sizes !!},
                        fits: 'cover',
                    }
                },
                created() {
                    if (this.form.id > 0) {
                        this.form = {
                            id: this.info.id,
                            cate_id: this.info.cate_id,
                            title: this.info.title,
                            content: this.info.content,
                            area: this.info.area,
                            price: this.info.price,
                            end_at: this.info.end_at,
                            end_state: this.info.end_state,
                            service_charge: this.info.service_charge,
                            service_cate: this.info.service_cate,
                            limit_num: this.info.limit_num,
                            bid_costs: this.info.bid_costs,
                            company_name: this.info.company_name,
                            company_type: this.info.company_type,
                            company_industry: this.info.company_industry,
                            company_size: this.info.company_size,
                            other: this.info.other,
                            link_name: this.info.link_name,
                            link_phone: this.info.link_phone,
                            link_department: this.info.link_department,
                            link_position: this.info.link_position,
                            number: this.info.number,
                            view: this.info.view,
                            urgent: this.info.urgent,
                            type: this.info.type,
                            status: this.info.status,
                            reason: this.info.reason,
                            evaluate_contract_pdf: this.info.evaluate_contract_pdf,
                            evaluate_contract_img: this.info.evaluate_contract_img,
                            quick_id: this.quick_info.id,
                            quick_mobile: this.quick_info.mobile,
                            quick_userid: this.quick_info.user_id,
                        };
                    }
                },
                methods: {
                    //截止时间
                    end_at() {
                        if (this.form.end_at) {
                            this.form.end_at = moment(this.form.end_at).format('YYYY-MM-DD');
                        } else {
                            this.form.end_at = '';
                        }
                    },
                    //返回
                    back() {
                        window.history.go(-1);
                    },
                    //更新
                    update() {
                        this.form._token = "{{csrf_token()}}";
                        this.$refs['form'].validate((valid) => {
                            if (!this.form.content) {
                                this.$refs.form.fields[3].error = "请填写需求描述";
                                return false;
                            }
                            if (!this.form.limit_num) {
                                this.$message.error('请填写商户上限!');
                                return false;
                            }
                            if (!this.form.bid_costs) {
                                this.$message.error('请填写投标费用!');
                                return false;
                            }
                            if (!this.form.service_cate || this.form.service_cate[0]<=0) {
                                this.$message.error('请选择服务类型!');
                                return false;
                            }
                            if (valid) {
                                let that = this;
                                $.post("{{ route('admin.demand.update') }}", this.form, function (res) {
                                    if (res.code) {
                                        that.$message.error(res.msg);
                                    } else {
                                        that.$message({
                                            type: 'success',
                                            duration: '1000',
                                            message: res.msg,
                                            onClose: () => {
                                                window.history.go(-1);
                                            }
                                        });
                                    }
                                }, 'JSON');
                            }
                        });
                    },
                }
            });
        })
    </script>
@endsection
